<script setup>
import router from "../../router/index.js";
import SideBarLogo from "./SideBarLogo.vue";
import {ref} from "vue";
import VMenu from "./VMenu.vue";
import store from "../../store/index.js";

// TODO 菜单数据，一般是从后端接口获取到的
const menuList = ref([
  {
    // 路由路径
    path: '/main',
    // 菜单的唯一标识
    name: 'main',
    // 菜单是否显示，true表示隐藏
    hidden: false,
    // 菜单的元数据，一般用于定义一些额外的信息，例如：菜单名称、菜单图标等
    meta: {
      // 菜单名称
      title: '系统管理',
      // 菜单图标
      icon: 'Setting'
    },
    // 子菜单节点，里面的数据结构和父菜单结构一样
    children: [
      {
        path: '/demo/pageOne',
        name: 'pageOne',
        meta: {
          title: '页面01',
          icon: 'Position'
        }
      },
      {
        path: '/demo/pageTwo',
        name: 'pageTwo',
        meta: {
          title: '页面02',
          icon: 'ElemeFilled'
        }
      },
    ]
  },
]);

const handleMenuClick = (name) => {
  router.push({name});
};
</script>

<template>
  <div class="v-aside-container">
    <!-- 左侧菜单栏 Logo 区域 -->
    <side-bar-logo/>
    <!--  菜单显示区域  -->
    <el-menu @select="handleMenuClick" default-active="2" style="border-right: unset;"
             :collapse="store.getters.isCollapsed" :collapse-transition="false"
             class="v-menu-container">
      <v-menu :menuData="menuList"></v-menu>
    </el-menu>
  </div>
</template>

<style scoped>
.v-menu-container {
  height: calc(100vh - 50px);
  overflow-x: hidden;
  overflow-y: auto;
  border-right: unset;
  /*添加过渡效果*/
  transition: all 0.5s ease;
}
</style>